<template>
  <div class="web-index">



    <el-row :gutter="10">
        <el-col :span="6" v-for="item in 4"  :xs="12">
          <el-card class="goods-card">

            <template #header>
              <img
                  src="https://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg" alt="">

            </template>

             <template #default>
                  <el-row>
                      <span class="tag">自营：</span>
                      <span class="desc">好手机 </span>
                  </el-row>

                 <el-row>
                   <span class="price">8900 </span>
                 </el-row>
             </template>


          </el-card>
        </el-col>

    </el-row>




  </div>
</template>

<script>
export default {
  name: "Index"
}
</script>

<style scoped>

  .web-index{
      margin-left: auto;
      margin-right: auto;
      width: 960px;
  }


  img {
      width: 200px ;
  }

  span.price {
      color: red;
  }

  span.price:before{
      display:inline-block;
      content: "￥";
  }

  span.tag{
     background-color: red;
     color: white;
  }

  span.desc{
      padding: 5px;
      font-family: '仿宋';
  }

</style>